import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { Consumer } from '../../utils/context'

export default class TodoListItem extends Component {

    static propTypes = {
      id: PropTypes.number,
      title: PropTypes.string,
      isok: PropTypes.bool
    }

    //切换完成状态
    // Changeisok = () => {
    //   this.props.Qiehuanisok(this.props.id)
    // }
    //删除待办事项
    // deletework = () => {
    //   this.props.deletItem(this.props.id)
    // }
    //删除已勾待办事项
    // boxcheck = (e) => {
    //   if(e.target.checked) {
    //     this.props.gouxuan(this.props.id)
    //   }
    // }

  render() {
    const {id, title, isok} = this.props
    return (
          <Consumer>
            {
              ({Qiehuanisok,deletItem}) => {
                return (
                  <li className="card column is-4">
                    <header className="card-header">
                      <p className="card-header-title">
                        {isok ? '已完成' : '待办'}事项
                        <input
                          type='checkbox'
                          onClick={this.boxcheck}
                        />
                      </p>
                    </header>
                    <div className="card-content">
                      <div className="content">
                        {title}
                      </div>
                    </div>
                    <footer className="card-footer">
                      <button
                      className="card-footer-item"
                      onClick={()=>{Qiehuanisok(id)}}
                      >
                      切换成{isok ? '未' : '已'}完成
                      </button>
                      <button
                      className="card-footer-item"
                      onClick={()=>{deletItem(id)}}
                      >
                      删除
                      </button>
                    </footer>
                  </li>
                )
              }
            }
          </Consumer>
    )
  }
}
